<template>
  <div class="app-container CustomerApplyDetails">
    <el-divider content-position="left">主要信息</el-divider>

    <el-row :gutter="20">
      <el-col :span="8">
        <div class="list-ditem">
          序号：
          <div>{{data.id}}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-ditem">
          注册地址：
          <div>{{data.companyAddress}}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-ditem">
          客户类型：
          <div>{{[,"企业","个人"][data.companyType]}}</div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="list-ditem">
          客户名称：
          <div>{{data.companyName}}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-ditem">
          线索来源：
          <div>{{data.source}}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-ditem">
          联系邮箱：
          <div>{{data.email}}</div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="list-ditem">
          所属行业名称：
          <div>{{data.industryname}}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-ditem">
          手机号联系电话：
          <div>{{data.mobile}}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-ditem">
          联系人：
          <div>{{data.name}}</div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="list-ditem">
          职务：
          <div>{{data.post}}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-ditem">
          规模：
          <div>{{data.scale}}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-ditem">
          通讯地址：
          <div>{{data.address}}</div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="list-ditem">
          状态：
          <div>{{["正常","关闭","转客户"][data.status]}}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-ditem">
          主题名称：
          <div>{{data.clueName}}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-ditem">
          公司状态：
          <div>{{data.companystatus}}</div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="list-ditem">
          注册资金：
          <div>{{data.registerMoney}}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-ditem">
          注册成立时间：
          <div>{{data.registerTime}}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-ditem">
          身份编码：
          <div>{{data.socialCreditCode}}</div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="list-ditem">
          logo：
          <div>
            <el-image :src="data.CompanyLogo">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-ditem">
          经营状态：
          <div>{{data.managementType}}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-ditem">
          企业性质：
          <div>{{data.companyNature}}</div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="list-ditem">
          登记机关：
          <div>{{data.registrationAuthority}}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-ditem">
          法人：
          <div>{{data.legalPerson}}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-ditem">
          分配人：
          <div>{{data.sysUser.nickName}}</div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="list-ditem">
          客户描述：
          <div>{{data.companyDesc}}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-ditem">
          营业范围：
          <div>{{data.businessScope}}</div>
        </div>
      </el-col>
    </el-row>

    <el-divider content-position="left">跟进信息</el-divider>

    <el-table v-loading="loading" :data="customerList">
      <el-table-column label="序号" align="center" prop="id"/>
      <el-table-column label="跟进人" align="center" prop="userId"/>
      <el-table-column label="意向水平" align="center" prop="intentionState">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.merchantsrecord_type" :value="scope.row.intentionState"/>
        </template>
      </el-table-column>
      <el-table-column label="跟进方式" align="center" prop="investigationMode">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.merchantsrecord_method" :value="scope.row.investigationMode"/>
        </template>
      </el-table-column>
      <el-table-column width="400" label="跟进记录" align="center" prop="record"/>


      <!--<el-table-column label="跟进事件" align="center" prop="companyName"/>
      <el-table-column label="状态" align="center" prop="name"/>
      <el-table-column label="线索来源" align="center" prop="mobile"/>
      <el-table-column label="更新时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建人" align="center" prop="mobile"/>-->
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <div class="CustomerApplyDetailsFooter">
      <el-button type="primary" @click="FollowClues">跟进线索</el-button>
      <el-button v-show="data.status === 0" type="primary" @click="GeneratedClient">生成客户</el-button>
      <!--      <el-button type="primary" @click="submitForm">提交</el-button>-->
      <el-button @click="cancel">返回</el-button>
    </div>
  </div>
</template>
<style lang="scss">
  .app-main {
    background: #E7E7E7;
  }

  .app-container {
    margin: 15px;
    background: #fff;
    border-radius: 5px;
  }

  .CustomerApplyDetails {
    .el-divider {
      margin-bottom: 50px;

      .el-divider__text {
        font-size: 20px;
      }
    }

    .list-ditem {
      display: flex;
      align-items: flex-start;
      font-size: 15px;
      color: #595959;

      .el-image {
        height: 100px;
      }

      el-image__inner {
        width: auto;
      }

      .image-slot {
        background: #F5F7FA;
        width: 150px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      > div {
        width: 180px;
      }
    }

    .CustomerApplyDetailsFooter {
      margin: 30px;
      display: flex;
      justify-content: center;
    }
  }
</style>
<script>
  import {getCustomermerchants, merchantsToCustomer} from "@/api/customermerchants/customermerchants";
  import {listMerchantsrecord} from "@/api/merchantsrecord/merchantsrecord";

  export default {
    name: "CustomerApplyDetails",
    dicts: ['merchantsrecord_type','merchantsrecord_method'],
    data() {
      return {
        //主要信息
        data: "",
        //跟进信息
        customerList: [],
        // 遮罩层
        loading: true,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
        },
        // 总条数
        total: 0,
      };
    },
    created() {
      const id = this.$route.query.id;
      getCustomermerchants(id).then(response => {
        this.data = response.data;
        // this.total = response.total;
        this.loading = false;
      });
      this.getList();
    },
    destroyed() {
    },
    methods: {
      getList() {
        const id = this.$route.query.id;
        this.loading = true;
        listMerchantsrecord({...this.queryParams,merchantsId:id}).then(response => {
          this.customerList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 跟进线索
      FollowClues() {
        this.conductionData.customermerchantsdetails = this.data;
        this.$router.push({
          path: "/merchart/customermerchantsfollowup"
        });
      },
      // 生成账单客户
      GeneratedClient() {
        this.conductionData.customermerchantsdetails = this.data;
        merchantsToCustomer(this.data.id).then(response =>{
          this.$modal.msgSuccess("新增客户成功！请到客户管理查看。");
          this.$router.go(-1);
        });
      },
      // 提交
      submitForm() {

      },
      // 返回
      cancel() {
        this.$router.go(-1);
      }
    }
  };
</script>
